/** 计数器组件 */
import React, { Component } from 'react'

import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import * as actions from "../store/counter/counterCreator"
import store from '../store'

import GlobalContext from '../utils/global.data'

class Counter extends Component {
  add() {
    this.props.addCounterAction(1)
  }

  sub() {
    this.props.subCounterAction(2)
  }

  componentDidMount() {
    store.subscribe(() => {
      this.setState({})
    })
  }

  render() {
    return (
      <>
        <div>
          <h2>计数器组件模块(redux devtools)</h2>
          <h4>计数器：{this.props.counter}</h4>
          <div>
            <button onClick={this.add.bind(this)}>增加</button>
            <button onClick={this.sub.bind(this)}>减少</button>
          </div>

        </div>

        <GlobalContext.Consumer>
          {
            context => {
              console.log(context, "注入的数据")
              return <>
                <h4>使用注入的name: {context.name}</h4>
              </>
            }
          }
        </GlobalContext.Consumer>
      </>
    )
  }
}

// Counter.contextType = GlobalContext

const mapState = state => {
  return {
    counter: state.counter
  }
}

const mapAction = dispatch => bindActionCreators(actions, dispatch)

export default connect(
  mapState,
  mapAction
)(Counter)
